<template>
  <div>
    <ul>
      <li v-for="msg in msgList" :key="msg.id">
				<!-- 很麻烦的一个写法 -->
        <!-- <router-link :to="'/home/message/detail/' + msg.id + '/' + msg.title">
					{{ msg.title }}
				</router-link> -->

				<!-- 比较麻烦的一个写法 -->
				<!-- <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">
					{{ msg.title }}
				</router-link> -->
				
				<!-- 最好的写法 -->
				<router-link 
					:to="{
						name:'xiangqing',
						params:{
							id:666,
							title:'哈哈'
						}
					}"
				>
					{{ msg.title }}
				</router-link>
      </li>

			<!-- <li>
				<router-link to="/home/message/detail">一个无名、无id的消息</router-link>
			</li> -->
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      msgList: [
        { id: "qwe1", title: "消息001" },
        { id: "qwe2", title: "消息002" },
        { id: "qwe3", title: "消息003" },
      ],
    };
  },
};
</script>